<template>
	<view class="content">
		<view class="top">
			<!-- <view class="title">
				<text>古美路店</text>
			</view> -->
		</view>
		<view class="info">
			
		
		<view class="info-xz" @click="selectfun">
			<view class="times-sk" :class="selecttime?'select-on':''">
				<!-- <text>sd</text> -->
				<view class="u-icons">
					<u-icon name="clock" color="#605F5F" size="20"></u-icon>
				</view>
				
				<text>先选时间</text> 
			</view>
			<view :class="!selecttime?'select-on':''">
				先选美容师
			</view>
		</view>
		<view class="info-data">
			<view class="info-data-item " :class="scheduldataselect==index?'info-data-select':''" v-for="(item,index) in schedulList" :key="index" @click="onselectdatafun(index)">
				<view :class="scheduldataselect==index?'select-w':''">{{item.week}}</view>
				<view :class="scheduldataselect==index?'select-w':''">{{item.schedulDate}}</view>
			</view>
			
		</view>
		
		<view class="info-time">
			<view class="info-time-item"  v-for="(item,index) in schedulList[scheduldataselect].items" :key="index" @click="onselecttimefun(index,item)">
				
				<view :class="index==schedultimeselect ?'info-time-item-select':''" >
					{{item.timeSection}}
				</view>
				
			</view>
			<!-- <view class="info-time-item-in">
				<view class="select-time">
					9:00
				</view>
				<view class="select-time">
					9:10
				</view>
				<view class="select-time">
					9:20
				</view>
				<view class="select-time">
					9:30
				</view>
				<view class="select-time">
					9:40
				</view>
				<view class="select-time">
					9:50
				</view>
			</view> -->
			
		</view>
		
		<view class="tame">
			<view class="tame-item" v-for="(item,index) in beauticianList" :key="index" @click="selecttamefun(item)">
				<image :src="httpUrlFn(item.head)" ></image>
				<view class="info-content">
					<view class="nameorp">
						<text class="nameorp-name">{{item.name}}</text>
						<text class="nameorp-p">{{item.positionTitle}}</text>
					</view>
					<view class="pforp">
						<image src="/static/images/collect_active.png" ></image>
						<text class="pf-f">{{item.grade}}</text>
						<text class="pf-p">{{item.badge}}</text>
					</view>
					
					
				</view>
				<view class="checkbox-groups">
					<!-- <u-checkbox-group @change="checkboxChange">
						<u-checkbox v-model="checked" :name="item.id" shape="circle" >{{item.checked}}</u-checkbox>
					</u-checkbox-group> -->
					<view class="noselecticontame" v-if="!item.checked">
						
					</view>
					<view class="selecticontame" v-if="item.checked">
						<image src="/static/images/icon-xz.png" ></image>
					</view>
				</view>
			</view>
			
		</view>
		
		
		
		
		</view>
		
		
		<view class="food-bt">
			<view class="foot-bt-num">
				<text class="red">￥</text>
				<text>{{paynum}}</text>
				<text class="red">起</text>
			</view>
			<view class="bt-next" @click="getshop">
				下一步
			</view>
		</view>
		
		<u-modal
		  :show="showModel"
		  @confirm="confirm"
		   @cancel="cancelfun"
		  title="温馨提示"
		  ref="uModal"
		  :async-close="true"
		  :content="showModelContent"
		  :show-cancel-button="true"
		></u-modal>
	</view>
</template>

<script>
	import {getSchedulAndBeautician,savePackageOrder} from "@/api/store";
	import {BASE_URL_IMAHE} from "../../../../utils/https";
	const app =getApp()
	export default {
	  name: "reserviceindex",
	  data() {
		  return {
			showModel:false,
			packageId:"",
			shopId:"",
			schedulItemId:'',
			teamId:"",
			paynum:0,
			schedulList:[],
			beauticianList:[],
			selecttime:true,
			timetop:0,
			tametop:0,
			infoheght:0,
			scheduldataselect:0,
			schedultimeselect:-1,
			checkedlist:[],
			showModelContent: "是否确定提交预约服务订单？",
			
			
			
		  }
	  },
	  onLoad(options) {
		  var sjs=this.randomWord()
		  var datatime = Date.parse(new Date());
		  this.token=''+sjs+''+datatime
		  this.packageId=options.packageId
		  this.shopId=options.shopId
		  // this.paynum=options.paynum
		  this.paynum=options.originalPrice
		this.getSchedulAndBeauticianfun()
			
		
	  },
	  onReady() {
		 
		 
	  		
	  	},
			
			
		methods:{
			
			
			async getSchedulAndBeauticianfun(){
				var res=await getSchedulAndBeautician(JSON.stringify({shopId:this.shopId}))
				if(res.result==0){
					console.log(res)
					
					res.beauticianList.forEach((item,index)=>{
						item.checked=false
					})
					this.beauticianList=res.beauticianList
					console.log("this.beauticianList",this.beauticianList)
					this.schedulList=res.schedulList
					setTimeout(()=>{
						this.getviewlink()
					},100)
				}
			},
			//选择团队
			selecttamefun(items){
				if(this.teamId==items.id){
					return
				}
				this.beauticianList.forEach((item,index)=>{
						if(items.id==item.id){
							// this.$set(this.beauticianList)
							this.teamId=items.id
							item.checked=true
						}else{
							item.checked=false
						}
					})
					console.log("this.beauticianList",this.beauticianList)
			},
			getshop(){
				if(!this.schedulItemId){
					this.$u.toast('请选择预约时间')
					return
				}
				if(!this.teamId){
					this.$u.toast('请选择宠物管理师')
					return
				}
				this.showModel=true
				
			},
			cancelfun(){
				this.showModel=false
			},
			//确定提交订单
			async confirm() {
				
			
						 //立即购买下单
						 let dataobj={token:this.token,
						 packageId:this.packageId,
						 userId:uni.getStorageSync("userId")?uni.getStorageSync("userId"):"",
						 schedulItemId:this.schedulItemId,
						 teamId:this.teamId
						}
					  console.log("dataobj",dataobj)
					  
						 let res=await savePackageOrder(JSON.stringify(dataobj))
						 console.log(res,"sdsadas")
						 if(res.result==0){
							 console.log(res)
							 // uni.reLaunch({
							 //   url: "/pages/subpackage/payment/index?payPrice="+this.payPrice,
							 // });
							 // 打开支付宝支付
							 uni.requestPayment({
							     provider: 'alipay',
							     orderInfo: res.tradeNo, //支付宝订单数据
							     success: function(res_alipay) {
							 			            if(res_alipay.resultCode=="9000"){
							 											 uni.showToast({
							 											   title: "支付成功",
							 											   icon: "success",
							 											   duration: 2000,
							 											 });
							 											 
							 											 setTimeout(() => {
							 											   uni.redirectTo({
							 											     url: "/pages/subpackage/order/index?status=2&type=0",
							 											   });
							 											 }, 1000);
							 										 }else{
							 											
							 											uni.showToast({
							 											  title: "支付失败",
							 											  icon: "error",
							 											  duration: 2000,
							 											});
							 											 setTimeout(() => {
							 											   uni.redirectTo({
							 											     url: "/pages/subpackage/order/index?status=1&type=0",
							 											   });
							 											 }, 1000);
							 											
							 										 }
							     },
							 									 fail(rej) {
							 									 	console.log("rej",rej)
							 									 }
							 })
						 }else{
							 var sjs=this.randomWord()
							 var datatime = Date.parse(new Date());
							 this.token=''+sjs+''+datatime
							 
						 }
						 // return
						 
						 
						
				
				
				
			},
			onselectdatafun(idnex){
				if(idnex!=this.scheduldataselect){
					this.scheduldataselect=idnex
					this.schedultimeselect=-1
					this.schedulItemId=""
				}
				
				
			},
			//选择时间
			onselecttimefun(index,item){
				
				this.schedultimeselect=index
				this.schedulItemId=item.id
				
			},
			//选择先选条件
			selectfun(){
				this.selecttime=!this.selecttime
				if(!this.selecttime){
					this.backToTop()
				}else{
					this.tobackToTop()
				}
			},
			getviewlink(){
				this.$nextTick(()=>{
							  const query = uni.createSelectorQuery()
							       query
							         .select('.tame')
							         .boundingClientRect((data) => {
							           console.log(data, 'data')
							           let pageScrollTop = Math.round(data.top)
							           this.timetop=pageScrollTop
									   console.log(this.timetop)
							       })
							         .exec()
								const query2 = uni.createSelectorQuery()
								     query2
								       .select('.info-data')
								       .boundingClientRect((data) => {
								         console.log(data.top, 'data')
								         let pageScrollTop = Math.round(data.top)
								         this.tametop=pageScrollTop
										 console.log(this.tametop)
								     })
								       .exec()
									   
									   const query3 = uni.createSelectorQuery()
									        query3
									          .select('.info-xz')
									          .boundingClientRect((data) => {
									            console.log(data, 'data')
									            let pageScrollTop = Math.round(data.height)
									            this.infoheght=pageScrollTop
									   					   console.log(this.timetop)
									        })
									          .exec()
				})
			},
			backToTop(){
				
				          uni.pageScrollTo({
				            scrollTop: this.timetop-this.infoheght-40, //滚动的距离
				            duration: 500, //过渡时间
				        })
				     
						
			},
			
			tobackToTop(){
				uni.pageScrollTo({
				    scrollTop: this.tametop-this.infoheght-40, //滚动的距离
				    duration: 500, //过渡时间
				})
				return
				 const query = uni.createSelectorQuery()
				      query
				        .select('.info-data')
				        .boundingClientRect((data) => {
				          console.log(data.top, 'data')
				          let pageScrollTop = Math.round(data.top)
				          uni.pageScrollTo({
				            scrollTop: pageScrollTop, //滚动的距离
				            duration: 500, //过渡时间
				        })
				      })
				        .exec()
						
			},
			httpUrlFn(item) {
			  return  BASE_URL_IMAHE + item;
			},
			randomWord() {
			    var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
			     var nums = "";
			      for (var i = 0; i < 20; i++) {
			      var id = parseInt(Math.random() * 61);
			      nums += chars[id]
			      }
			      return nums; 
			      },
		}
	}
</script>

<style scoped lang="scss">
	.top{
		width: 750rpx;
		height: 564rpx;
		
		background: linear-gradient(360deg, rgba(255,255,255,0.1) 3%, rgba(250,185,171,0.1) 16%, #F9603D 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		margin: 0 auto;
		.title{
			width: 750rpx;
			height: 172rpx;
			background: #FA623D;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			opacity: 1;
			text-align: center;
			padding-top: 108rpx;
			text{
				
				font-size: 33rpx;
				color: #FFFFFF;
				line-height: 46rpx;
				
			}
		}
		
		
		
	}
	.info{
		margin-top: -400rpx;
			
		.info-xz{
			width: 565rpx;
			height: 77rpx;
			background: #EFEFEF;
			opacity: 1;
			margin-left: 39rpx;
			position: sticky;
			top: 10rpx;
			left: 0;
			display: flex;
			justify-content: center;
			text-align: center;
			align-items: center;
			border-radius: 25rpx;
			.times-sk{
				width: 276rpx;
				display: flex;
				justify-content: space-between;
				padding: 0 55rpx;
				align-items: center;
				box-sizing: border-box;
				.u-icons{
					width: 30rpx;
					height: 30rpx;
				}
			}
			view{
				border-radius: 25rpx;
				width: 276rpx;
				height: 68rpx;
				
				opacity: 1;
				line-height: 68rpx;
				color: #605F5F;
			}
			.select-on{
				background: #FA623D;
				color: #FFFFFF;
			}
			
		}
		
		.info-data{
			width: 750rpx;
			padding: 0 39rpx;
			display: flex;
			box-sizing: border-box;
			justify-content: space-between;
			margin-top: 31rpx;
			.info-data-item{
				width: 155rpx;
				height: 124rpx;
				background: #FFFFFF;
				opacity: 1;
				border: 1rpx solid #CCCCCC;
				border-radius: 15rpx;
				text-align: center;
				view:first-child{
					width: 100%;
					font-size: 33rpx;
					color: #000000;
					line-height: 46rpx;
					padding-top: 24rpx;
					
				}
				view:last-child{
					font-size: 24rpx;
					color: #605F5F;
					line-height: 34rpx;
					padding-top: 8rpx;
					
					
				}
				.select-w{
					color: #ffffff !important;
				}
				
				
				
			}
			.info-data-select{
				background: #FA623D;
				
			}
		}
		.info-time{
			width: 750rpx;
			padding-top: 15rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			padding: 0 39rpx;
			.info-time-item{
				
				box-sizing: border-box;
				
				
				margin-top: 24rpx;
				
				view{
					width: 320rpx;
					height: 89rpx;
					background: #FFFFFF;
					opacity: 1;
					border: 1rpx solid #CCCCCC;
					line-height: 89rpx;
					text-align: center;
					font-size: 33rpx;
					color: #515151;
					border-radius: 15rpx;
					// padding: 20rpx 20rpx;
					
				}
				.info-time-item-select{
					border: 3rpx solid #FA623D;
					color: #000000;
				}
			}
			.info-time-item-in{
				width: 100%;
				box-sizing: border-box;
				padding: 9rpx 39rpx 6rpx;
				display: flex;
				background: #DCDCDC;
				justify-content: space-between;
				flex-wrap: wrap;
				border-radius: 15rpx;
				margin-top: 28rpx;
				view{
					width: 214rpx;
					height: 75rpx;
					background: #FFFFFF;
					opacity: 1;	
					font-size: 33rpx;
					color: #515151;
					line-height: 75rpx;
					text-align: center;
					border-radius: 15rpx;
					margin-bottom: 13rpx;
				}
			}
		}
		.tame{
			margin-top: 26rpx;
			width: 750rpx;
			.tame-item{
				width: 748rpx;
				height: 225rpx;
				background: #FFFFFF;
				opacity: 1;
				border-radius: 35rpx;
				padding: 30rpx 38rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				.checkbox-groups{
					margin-top: 54rpx;
					.noselecticontame{
						width: 44rpx;
						height: 44rpx;
						border-radius: 50%;
						border: 1rpx solid #dadbde;
						box-sizing: border-box;
					}
					.selecticontame{
						width: 44rpx;
						height: 44rpx;
						border-radius: 50%;
						image{
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
				image{
					width: 105rpx;
					height: 105rpx;
					// background: #000000;
					opacity: 1;
					border-radius: 50%;
				}
				.info-content{
					margin-top: 12rpx;
					width: 500rpx;
					// background-color: red;
					display: flex;
					flex-direction: column;
					.nameorp{
						display: flex;
						.nameorp-name{
							font-size: 33rpx;
							color: #000000;
							line-height: 46rpx;
						}
						.nameorp-p{
							padding: 10rpx 20rpx;
							background: linear-gradient(270deg, #BE55FF 0%, #7115FF 100%, #F9603D 100%);
							font-size: 24rpx;
							color: #FCFCFC;
							line-height: 34rpx;
							border-radius: 35rpx;
							margin-left: 19rpx;
						}
					}
					.pforp{
						display: flex;
						align-items: center;
						margin-top: 17rpx;
						image{
							width: 19rpx;
							height: 19rpx;
						}
						.pf-f{
							font-size: 24rpx;
							color: #FA623D;
							margin-left: 3rpx;
						}
						.pf-p{
							padding: 5rpx 10rpx;
							border: 1rpx solid #ED975D;
							margin-left: 28rpx;
							font-size: 24rpx;
							color: #ED975D;
							line-height: 34rpx;
							border-radius: 35rpx;
						}
					}
				}
			}
		}
		
		
		
	}
	.food-bt{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 147rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		display: flex;
		justify-content: space-between;
		padding-left: 42rpx;
		padding-right: 36rpx;
		align-items: center;
		
		.foot-bt-num{
			display: flex;
			align-items: flex-end;
			font-size: 44rpx;
			color: #FA623D;
			// height: 44rpx;
			line-height: 44rpx;
			.red{
				font-size: 22rpx;
				line-height: 22rpx;
				padding-bottom: 5rpx;
			}
		}
		.bt-next{
			width: 172rpx;
			height: 53rpx;
			background: #F55334;
			opacity: 1;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 53rpx;
			text-align: center;
			border-radius: 35rpx;
		}
	}
	
	
	
</style>